<template>
  <div
      style="display: flex;flex-direction:column;justify-content: flex-end;height: 100%">
    <div style="font-size: 40px;font-weight: bold;">{{ currentTime }}</div>
    <div style="display: flex;align-items: end;line-height: 30px">
      <div style="font-size: 20px;margin-right: 10px">{{ formattedDate }}</div>
      <div style="font-size: 14px">农历{{ lunarDay }}</div>
    </div>
    <div>{{ title }}</div>
  </div>
</template>
<script setup>
import {ref, onMounted, onUnmounted, computed, defineProps} from 'vue';
import {getLunar} from "chinese-lunar-calendar";

defineProps({
  'title': {
    type: String
  }
})

const lunarDay = ref(""); // 用于存储农历日期

let timerId
// 创建一个响应式变量来存储当前时间
const currentTime = ref(new Date().toLocaleTimeString());

// 定义一个更新时间的函数
const updateTime = () => {
  currentTime.value = new Date().toLocaleTimeString();
};

// 组件挂载时设置定时器
onMounted(() => {
  timerId = setInterval(updateTime, 1000); // 每秒更新时间

  // 获取当前日期并转换为农历
  const date = new Date();
  const curYear = date.getFullYear();
  const curMonth = date.getMonth() + 1;
  const curDay = date.getDate();
  const lunarDate = getLunar(curYear, curMonth, curDay);
  lunarDay.value = lunarDate.dateStr; // 将农历日期设置到响应式变量
});

// 组件卸载时清除定时器
onUnmounted(() => {
  clearInterval(timerId);
});


// 创建一个响应式变量来存储当前日期
const date = ref(new Date());

// 格式化日期为中文格式
const formatChineseDate = (date) => {
  const year = date.getFullYear();
  const month = date.getMonth() + 1;
  const day = date.getDate();

  return `${year}年${month}月${day}日`;
};
// 创建一个计算属性来格式化日期
const formattedDate = computed(() => formatChineseDate(date.value));
</script>
<script>
export default {
  name: "a-date",
}
</script>

<style scoped lang="less">
* {
  color: #fff;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
}
</style>